comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
A Flash image viewer by reading directory contents |
As a web developer or programmer, you want to make your software as dynamic as possible. This means that you can easily change the code or contents, without digging in and rebuilding your original source. (Flash) Image rotators are a pretty effective and attractive way to show your images. Most of the times, these Flash image rotators are not dynamic and need to rebuild every time you want to change the images. Here's a solution for this problem, because I'll explain how to create a Flash image viewer by reading directory contents. Just place all images you want to rotate in the same directory as the Flash file and this script does all the work for you. If you want to add an image, just place it online and the Flash viewer will show it. Check out the demo of the Flash image viewer, or download the flash image viewer by reading directory contents from the download section. Preperations First things first. You'll need to have the following to bring this project to a success:
Everything checked? Proceed to the next step. Create the XML file with PHP Now we'll need to get the directory contents using PHP. By manipulating the header type of the PHP file, you can let any other program "think" this file is a XML file. You'll need to do this in order to let Flash read the (fake) XML file. Comments are added in the source to explain what the code does. <?php // Set which extensions should be approved in the XML file $extensions = array ( 'jpg', 'JPG', 'png', 'PNG', 'gif', 'GIF', 'bmp', 'BMP' ); // Echo the header (XML) header("Content-Type: application/xml;charset=ISO-8859-1"); // Prepare the XML file echo '<?xml version="1.0" encoding="ISO-8859-1"?>' . "\r\n"; echo "<images>\r\n"; // Get the files from the current directory if (file_exists ("./")) { if (is_dir ("./")) { $dh = opendir ("./") or die (" Directory Open failed !"); // Prepare the images array $imgs = array(); while ($file = readdir ($dh)) { // Only get the files ending with the correct extension if ( in_array( substr($file, -3), $extensions ) ) { array_push($imgs, $file); } } Closedir ($dh); } // Sort the array sort($imgs); foreach ($imgs as $img) { // Return all images in XML format echo (' <image src="' . $img . '" />'); echo "\r\n"; } } echo "</images>"; ?> Save the file as source.php. Upload it in the directory on your server where you have the images stored. When viewing the PHP file, you should get something looking like this. <?xml version="1.0" encoding="ISO-8859-1"?> <images> <image src="01.jpg" /> <image src="02.jpg" /> <image src="03.jpg" /> <image src="04.jpg" /> <image src="05.jpg" /> </images> If everything is correct, you can go to the next step: Creating the Flash viewer. Flash Viewer I'm not going to explain step by step how to create the Flash viewer, you can learn from my source code.. Basically, the Flash file looks like this.
Just make sure the FPS of the file is set to 24. Actionscript Here is the actionscript code I created to rotate the images, slowly showing them after another. Create a new layer on top of all layers and call it "AS". Press "F9" to insert the ActionScript code. Comments are added (as usual). // settings var changingspeed = 300; // stop the frame stop(); // errorbox is not visible errorbox._visible = false; // Prepare the images var totalnrimg; var curnrimg = 0; // Prepare the images array _root.img = new Array(); // Load the XML file var xmlData = new XML(); xmlData.ignoreWhite = true; xmlData.onLoad = processXMLData; xmlData.load("source.php"); // When XML data is loaded, execute this function function processXMLData(success) { if (success) { // Loop through the XML file for (i = 0; i < this.childNodes.length; i++) { xmlNode = this.childNodes[i]; for (j = 0; j < this.childNodes[i].childNodes.length; j++) { _root.img[j] = xmlNode.childNodes[j].attributes.src; } } totalnrimg = _root.img.length; // Load the first image loadMovie(_root.img[curnrimg], imgholder); curnrimg++; // Load the second image loadMovie(_root.img[curnrimg], imgholder2); } else { errorbox._visible = true; errorbox.text = "XML file could not be found"; } } var showingHidebox = 100; var isShowing = 0; var showingFirstImg = changingspeed; var firstIsShowing = true; _root.onEnterFrame = function() { // Slowly show the image hidebox._alpha = showingHidebox; if (showingHidebox != 0) { showingHidebox--; } // Slowly hide the first image imgholder._alpha = showingFirstImg; if (firstIsShowing == true) { showingFirstImg--; if (showingFirstImg <= (0-changingspeed/2)) { firstIsShowing = false; curnrimg++; if (totalnrimg == curnrimg) { curnrimg = 0; } loadMovie(_root.img[curnrimg], imgholder); } } if (firstIsShowing == false) { showingFirstImg++; if (showingFirstImg >= changingspeed) { firstIsShowing = true; curnrimg++; if (totalnrimg == curnrimg) { curnrimg = 0; } loadMovie(_root.img[curnrimg], imgholder2); } } } Export your file to swf and upload it to your server. Load the flash file to test your movie and check if it's working. If everything is done correct, the images should show up nicely. Conclusion & download You could think about reading the size of the images so it would be totally dynamic. Other than that I think this is a pretty nice way to slowly rotate and show images that are from one directory. If you don't want to animate the viewer, just could also use the PHP Random Image Rotation. You can download the flash image viewer by reading directory contents from the download section. If you're looking for an image viewer for your website, you can also check out 22 beautiful image galleries for your website. Tags: xml php actionscript flash tutorial Interested in this topic? You might enjoy another article I've written called |
< Prev | Next > |
---|
Search |
---|
Or try the sitemap |